API for Widgets Overview
To create a Widget, edit the [device]$$myWidget].js file by writing your own code in the functions to implement (i.e, getEditableControl(), getReadOnlyControl() and renderComplex()). The following information provides a quick guide to the functions you may directly use in your implementation. For more information about the [device]$$myWidget].js file, refer to Widget structure.
Methods to Retrieve Information from the Widget
These methods are provided by the this object reference. Keep in mind that all properties can be accessed by using: this.properties.[your_property] (when these properties are not set explicitly as asynchronous).
| Method | Description |
|---|---|
getPropertyValue(string propertyName) | Returns the promise of a jQuery deferred object. You may use it to obtain values from a Widget property which was set as asynchronous (async=true). Use of this promise will require that you define a function at .done(). |
getServerResourceURL(string relativeURL) | Returns the promise of a jQuery deferred object to obtain a string having the full path of an auxiliary file placed inside the Widget. |
ready() | Returns the promise of a jQuery deferred object to execute a function ensuring that Bizagi has finished displaying the Widget. |
getValue() | Returns the current value held in the XPath of that Widget (if using an XPath). |
getDisplayValue() | Returns a string having the display value for that attribute. |
getControl() | Returns a jQuery object ($) having the complete HTML of the Widget. |
Methods to Obtain Information from Other Resources
| Method | Description |
|---|---|
getRenderValue(string XPath) | Returns the value held in an XPath within that same form. |
bizagi.localization.getResource(string resourceName) | Returns a resource object with localization definitions (dateFormat, timeFormat, numericFormat). |
Methods to Trigger Changes in the Widget
| Method | Description |
|---|---|
changeColor(string color, boolean isLabelFormat) | Changes the color of all characters within the Widget. |
changeBackgroundColor(string color) | Changes the background color of the entire Widget. |
changeFontBold(boolean bold, boolean isLabelFormat) | Changes the font weight to bold or normal. |
changeVisibility(boolean visible) | Changes the visibility of the Widget. |
changeEditability(boolean editable) | Changes the editability of the Widget. |
Utility and Validations
| Method | Description |
|---|---|
navigator.onLine() | Evaluates internet connectivity. |
bizagi.util.isIE() | Checks if the browser is Internet Explorer. |
bizagi.util.parseBoolean(string booleanProperty) | Parses boolean property values. |
getMode() | Returns the current mode (design or execution). |
Trace Methods
| Method | Description |
|---|---|
bizagi.log(string trace) | Records log messages. |
console.log(string trace) | Records messages in browser console. |
console.error(string trace) | Logs error messages. |
console.warn(string trace) | Logs warning messages. |
Common jQuery and JavaScript Methods
| Method | Description |
|---|---|
setTimeout(function toExecute, int milliseconds) | Executes a function after specified time. |
[object].addClass(string className) | Dynamically adds CSS class. |
[object].removeClass(string className) | Dynamically removes CSS class. |
[object].attr() | Gets or sets HTML attribute values. |
[object].append(string content) | Appends HTML content. |
[object].appendTo([object myObject]) | Inserts object into another object. |
Common Predefined Events
| Event | Description |
|---|---|
[object].click() | Triggered when object is clicked. |
[object].hover() | Triggered when mouse hovers over object. |
[object].focusout() | Triggered when object loses focus. |
[object].focus() | Triggered when object gains focus. |
[object].keypress() | Triggered when a key is pressed. |
[object].change() | Triggered when value changes. |
Common CSS Selectors
| Selector | Description |
|---|---|
.[class] | Applies styles to elements with specific class. |
#[id] | Applies styles to specific element by ID. |
.[class] [element] | Applies styles to elements inside parent class. |
.[class1] .[class2] | Applies styles to nested elements. |
.[class] + [element] | Applies styles to elements immediately after class. |
For a starting reference on CSS selectors, you may refer to third-party documentation such as https://www.w3schools.com/cssref/css_selectors.asp.
Important
Consider these notes when using the API for Widgets:
-
You may use the
thisreference to use properties and methods. -
You may rely on the Widget Editor's functions help to use and search the API. While editing a js file, you may locate a specific function and insert its code:
- At any time, you may use the IntelliSense feature by pressing CTRL + space bar:
